<template>
  <el-dialog
    :model-value="visible"
    title="实时配送地图"
    width="90%"
    :close-on-click-modal="false"
    @close="handleClose"
    class="delivery-map-dialog"
  >
    <div class="map-container">
      <!-- 地图头部信息 -->
      <div class="map-header">
        <div class="order-info">
          <h3>订单 #{{ order?.id }}</h3>
          <div class="location-item pickup-location">
            <el-icon><Shop /></el-icon>
            <span class="location-label">取餐:</span>
            <span>{{ props.pickupAddress?.address || props.order?.pickupAddress || props.order?.storeAddress || '商家地址' }}</span>
          </div>
          <div class="location-item delivery-location">
            <el-icon><Location /></el-icon>
            <span class="location-label">送达:</span>
            <span>{{ props.deliveryAddress?.address || props.order?.delivery_address || '配送地址' }}</span>
          </div>
          <p class="phone-info" v-if="riderInfo?.phone">
            <el-icon><Phone /></el-icon>
            {{ riderInfo?.phone }}
          </p>
        </div>
        <div class="distance-info">
          <!-- <el-tag :type="getDistanceTagType()" size="large">
            {{ getDistanceText() }}
          </el-tag>
          <el-tag type="info" size="large" class="eta-tag">
            {{ getTimeText() }}
          </el-tag> -->
          <el-tag 
            v-if="riderInfo?.name" 
            type="success" 
            size="small" 
            class="rider-info"
          >
            配送员：{{ riderInfo.name }}
          </el-tag>
        </div>
      </div>

      <!-- 地图区域 -->
      <div :id="mapId" class="map-area" ref="mapContainer">
        <div class="map-loading" v-show="mapLoading">
          <el-icon class="is-loading"><Loading /></el-icon>
          <p>正在加载地图...</p>
        </div>
      </div>

      <!-- 地图底部操作栏 -->
      <div class="map-actions">
        <el-button 
          type="primary" 
          @click="refreshLocation"
          :loading="locationUpdating"
          :icon="Refresh"
        >
          刷新位置
        </el-button>
        <el-button 
          v-if="riderInfo?.phone"
          type="success" 
          @click="contactRider"
          :icon="Phone"
        >
          联系骑手
        </el-button>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Location, Phone, Loading, Shop, Refresh } from '@element-plus/icons-vue'

// 高德地图类型声明
declare global {
  interface Window {
    AMap: any
  }
}

// 组件Props
interface Props {
  visible: boolean
  order: any
  riderInfo?: {
    name?: string
    phone?: string
  }
  riderLocation?: {
    latitude: number
    longitude: number
  }
  pickupAddress?: {
    latitude: number
    longitude: number
    address: string
    name: string
    phone: string
  }
  deliveryAddress?: {
    latitude: number
    longitude: number
    address: string
    name: string
    phone: string
  }
}

const props = defineProps<Props>()
const emit = defineEmits<{
  close: []
}>()

// 状态管理
const mapContainer = ref<HTMLElement>()
const mapLoading = ref(true)
const locationUpdating = ref(false)
const distance = ref(0)
const estimatedTime = ref(0)
const mapId = ref(`customer-delivery-map-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`)

// 地图相关变量
let map: any = null
let riderMarker: any = null
let destinationMarker: any = null
let pickupMarker: any = null

// 监听弹窗显示状态
watch(() => props.visible, async (newVal) => {
  if (newVal) {
    // 等待DOM完全更新
    await nextTick()
    // 再等待一个微任务以确保DOM完全渲染
    await new Promise(resolve => setTimeout(resolve, 0))
    initMap()
    calculateDistanceAndTime() // 初始化时计算距离
  } else {
    destroyMap()
  }
})

// 监听数据变化重新计算距离
watch([() => props.riderLocation, () => props.deliveryAddress], () => {
  calculateDistanceAndTime()
}, { deep: true })

// 初始化地图
const initMap = async () => {
  try {
    mapLoading.value = true
    
    // 等待多个周期确保DOM完全准备好
    await nextTick()
    await new Promise(resolve => setTimeout(resolve, 100))
    
    // 多次检查DOM容器是否存在
    let retryCount = 0
    const maxRetries = 5
    
    while (retryCount < maxRetries) {
      if (mapContainer.value && document.getElementById(mapId.value)) {
        break
      }
      await new Promise(resolve => setTimeout(resolve, 50))
      retryCount++
    }
    
    if (!mapContainer.value || !document.getElementById(mapId.value)) {
      console.warn('地图容器在多次尝试后仍不存在，容器:', mapContainer.value, 'DOM ID:', mapId.value)
      return
    }
    
    // 检查是否有高德地图API（或开发模式）
    const isDevelopmentMode = import.meta.env.DEV && !import.meta.env.VITE_DISABLE_MAP_DEV_MODE
    
    if (typeof window.AMap !== 'undefined' || isDevelopmentMode) {
      // 使用真实的高德地图API或开发模式
      await initAMapInstance()
    } else {
      // 降级到简单地图显示
      await initSimpleMap()
    }
    
  } catch (error) {
    console.error('地图初始化失败:', error)
    ElMessage.error('地图加载失败')
    await initSimpleMap() // 降级处理
  } finally {
    mapLoading.value = false
  }
}

// 初始化高德地图实例
const initAMapInstance = async () => {
  // 等待高德地图API完全加载
  if (typeof window.AMap === 'undefined') {
    console.warn('高德地图API未加载，等待加载...')
    // 等待API加载
    let retryCount = 0
    while (typeof window.AMap === 'undefined' && retryCount < 10) {
      await new Promise(resolve => setTimeout(resolve, 500))
      retryCount++
    }
    
    if (typeof window.AMap === 'undefined') {
      throw new Error('高德地图API加载超时')
    }
  }

  // 确定地图中心点（优先使用配送地址，其次是骑手位置，最后是商家地址）
  let centerLocation = [116.4074, 39.9042] // 默认北京中心
  
  // 优先使用配送地址坐标，如果无效则尝试地理编码
  if (props.deliveryAddress?.latitude && props.deliveryAddress?.longitude && 
      !(props.deliveryAddress.latitude === 0 && props.deliveryAddress.longitude === 0)) {
    centerLocation = [props.deliveryAddress.longitude, props.deliveryAddress.latitude]
  }
  else if (props.deliveryAddress?.address) {
    // 尝试对配送地址进行地理编码来确定中心点
    const geocoded = await geocodeAddress(props.deliveryAddress.address)
    if (geocoded) {
      centerLocation = geocoded
    }
  }
  // 其次使用传统的order字段
  else if (props.order?.delivery_coordinates) {
    const [lat, lng] = props.order.delivery_coordinates.split(',').map(Number)
    centerLocation = [lng, lat]
  } 
  // 然后使用骑手位置
  else if (props.riderLocation) {
    centerLocation = [props.riderLocation.longitude, props.riderLocation.latitude]
  }
  // 最后使用商家地址
  else if (props.pickupAddress?.latitude && props.pickupAddress?.longitude &&
           !(props.pickupAddress.latitude === 0 && props.pickupAddress.longitude === 0)) {
    centerLocation = [props.pickupAddress.longitude, props.pickupAddress.latitude]
  }
  else if (props.pickupAddress?.address) {
    // 尝试对商家地址进行地理编码来确定中心点
    const geocoded = await geocodeAddress(props.pickupAddress.address)
    if (geocoded) {
      centerLocation = geocoded
    }
  }

  // 创建地图实例
  map = new window.AMap.Map(mapId.value, {
    zoom: 15,
    center: centerLocation,
    resizeEnable: true,
    rotateEnable: false,
    pitchEnable: false,
    scrollWheel: true,
    doubleClickZoom: true,
    keyboardEnable: true,
    dragEnable: true,
    zoomEnable: true,
    mapStyle: 'amap://styles/normal'
  })

  // 等待地图加载完成
  await new Promise((resolve) => {
    map.on('complete', resolve)
  })

  // 添加地图控件 - 使用最简单安全的方式
  try {
    // 简化控件添加，避免构造函数问题
    if (window.AMap && typeof window.AMap.plugin === 'function') {
      // 使用plugin方式加载控件
      window.AMap.plugin(['AMap.Scale', 'AMap.ToolBar'], () => {
        try {
          if (window.AMap.Scale) {
            map.addControl(new window.AMap.Scale())
          }
          if (window.AMap.ToolBar) {
            map.addControl(new window.AMap.ToolBar())
          }
          console.log('地图控件加载成功')
        } catch (pluginError) {
          console.warn('plugin方式加载控件失败:', pluginError)
        }
      })
    } else {
      console.log('跳过控件加载，使用基础地图功能')
    }
  } catch (controlError) {
    console.warn('地图控件初始化完全失败:', controlError)
    // 控件加载失败不影响地图基本功能，继续执行
  }

  // 添加标记点
  await addMarkers()
}

// 地理编码函数：将地址转换为经纬度
const geocodeAddress = async (address: string): Promise<[number, number] | null> => {
  if (!address) return null
  
  try {
    // 使用代理访问高德地图REST API
    const apiKey = '52dd86f4793513b166a46cb375010201'
    const url = `/amap/v3/geocode/geo?key=${apiKey}&address=${encodeURIComponent(address)}`
    
    const response = await fetch(url)
    const data = await response.json()
    
    if (data.status === '1' && data.geocodes && data.geocodes.length > 0) {
      const location = data.geocodes[0].location.split(',')
      const lng = parseFloat(location[0])
      const lat = parseFloat(location[1])
      console.log(`地址 "${address}" 解析为坐标:`, lng, lat)
      return [lng, lat]
    } else {
      console.warn(`地址解析失败: ${address}`, data)
      return null
    }
  } catch (error) {
    console.error('地理编码失败:', error)
    return null
  }
}

// 添加地图标记
const addMarkers = async () => {
  try {
    console.log('开始添加地图标记...')
    console.log('props.deliveryAddress:', props.deliveryAddress)
    console.log('props.pickupAddress:', props.pickupAddress)
    console.log('props.order:', props.order)
    console.log('props.riderLocation:', props.riderLocation)
    
    // 添加配送地址标记
    if (props.deliveryAddress) {
      console.log('尝试添加配送地址标记:', props.deliveryAddress.latitude, props.deliveryAddress.longitude)
      
      let longitude = props.deliveryAddress.longitude
      let latitude = props.deliveryAddress.latitude
      
      // 如果坐标为0或未定义，尝试地理编码
      if (!longitude || !latitude || (longitude === 0 && latitude === 0)) {
        console.log('坐标无效，尝试地理编码地址:', props.deliveryAddress.address)
        const geocoded = await geocodeAddress(props.deliveryAddress.address)
        if (geocoded) {
          [longitude, latitude] = geocoded
          console.log('地理编码成功:', longitude, latitude)
        } else {
          // 使用北京中心作为默认位置
          longitude = 116.4074
          latitude = 39.9042
          console.log('地理编码失败，使用默认位置')
        }
      }
      
      destinationMarker = new window.AMap.Marker({
        position: [longitude, latitude],
        title: '配送地址',
        icon: new window.AMap.Icon({
          imageSize: [32, 32],
          image: ''
        })
      })
      destinationMarker.setMap(map)
      console.log('✅ 配送地址标记已添加:', { longitude, latitude, address: props.deliveryAddress.address })
    }
    // 降级：使用传统的order字段
    else if (props.order?.delivery_coordinates) {
      const [lat, lng] = props.order.delivery_coordinates.split(',').map(Number)
      
      destinationMarker = new window.AMap.Marker({
        position: [lng, lat],
        title: '配送地址',
        icon: new window.AMap.Icon({
          imageSize: [32, 32],
          image: ''
        })
      })
      destinationMarker.setMap(map)
      console.log('配送地址标记已添加（降级）')
    }

    // 添加商家地址标记（取餐地址）
    if (props.pickupAddress) {
      let longitude = props.pickupAddress.longitude
      let latitude = props.pickupAddress.latitude
      
      // 如果坐标为0或未定义，尝试地理编码
      if (!longitude || !latitude || (longitude === 0 && latitude === 0)) {
        console.log('商家坐标无效，尝试地理编码地址:', props.pickupAddress.address)
        const geocoded = await geocodeAddress(props.pickupAddress.address)
        if (geocoded) {
          [longitude, latitude] = geocoded
          console.log('商家地理编码成功:', longitude, latitude)
        } else {
          // 使用北京中心作为默认位置
          longitude = 116.4074
          latitude = 39.9042
          console.log('商家地理编码失败，使用默认位置')
        }
      }
      
      pickupMarker = new window.AMap.Marker({
        position: [longitude, latitude],
        title: '商家地址',
        icon: new window.AMap.Icon({
          imageSize: [32, 32],
          image: ''
        })
      })
      pickupMarker.setMap(map)
      console.log('✅ 商家地址标记已添加:', { longitude, latitude, address: props.pickupAddress.address })
    }
    // 降级：使用传统的order字段
    else if (props.order?.pickup_coordinates || props.order?.store_coordinates) {
      const coordinates = props.order.pickup_coordinates || props.order.store_coordinates
      const [lat, lng] = coordinates.split(',').map(Number)
      
      pickupMarker = new window.AMap.Marker({
        position: [lng, lat],
        title: '商家地址',
        icon: new window.AMap.Icon({
          imageSize: [32, 32],
          image: ''
        })
      })
      pickupMarker.setMap(map)
      console.log('商家地址标记已添加（降级）')
    }

    // 添加骑手位置标记
    if (props.riderLocation) {
      riderMarker = new window.AMap.Marker({
        position: [props.riderLocation.longitude, props.riderLocation.latitude],
        title: '骑手位置',
        icon: new window.AMap.Icon({
          imageSize: [32, 32],
          image: ''
        })
      })
      
      riderMarker.setMap(map)
    }

    // 自动调整视野以包含所有标记
    if (destinationMarker || pickupMarker || riderMarker) {
      const markers = [destinationMarker, pickupMarker, riderMarker].filter(Boolean)
      map.setFitView(markers, false, [20, 20, 20, 20])
    }

  } catch (error) {
    console.error('添加地图标记失败:', error)
  }
}

// 初始化简单地图（降级方案）
const initSimpleMap = async () => {
  if (!mapContainer.value) return
  
  const pickupAddr = props.pickupAddress?.address || props.order?.pickupAddress || props.order?.storeAddress || '商家地址'
  const deliveryAddr = props.deliveryAddress?.address || props.order?.delivery_address || '配送地址'
  const riderName = props.riderInfo?.name || ''
  
  mapContainer.value.innerHTML = `
    <div class="simple-map">
      <div class="map-info">
        <h3>配送信息</h3>
        <div class="location-items">
          <div class="location-item">
            <div class="location-icon pickup">📍</div>
            <div class="location-details">
              <div class="location-type">取餐地址</div>
              <div class="location-address">${pickupAddr}</div>
            </div>
          </div>
          <div class="location-item">
            <div class="location-icon delivery">🏠</div>
            <div class="location-details">
              <div class="location-type">送达地址</div>
              <div class="location-address">${deliveryAddr}</div>
            </div>
          </div>
          ${riderName ? `
          <div class="location-item">
            <div class="location-icon rider">🚴</div>
            <div class="location-details">
              <div class="location-type">配送员</div>
              <div class="location-address">${riderName}</div>
            </div>
          </div>
          ` : ''}
        </div>
      </div>
      <div class="map-note">
        <p>地图服务暂不可用，显示基本配送信息</p>
      </div>
    </div>
  `
}

// 关闭地图
const handleClose = async () => {
  try {
    // 先清理地图资源
    destroyMap()
    // 等待一个微任务确保清理完成
    await new Promise(resolve => setTimeout(resolve, 0))
    // 再关闭弹窗
    emit('close')
  } catch (error) {
    console.error('关闭地图时出错:', error)
    // 确保弹窗还是能关闭
    emit('close')
  }
}

// 销毁地图
const destroyMap = () => {
  try {
    // 重置加载状态
    mapLoading.value = true
    
    // 清理地图标记
    try {
      if (riderMarker) {
        riderMarker.setMap && riderMarker.setMap(null)
        riderMarker = null
      }
    } catch (e) {
      console.warn('清理骑手标记失败:', e)
    }
    
    try {
      if (destinationMarker) {
        destinationMarker.setMap && destinationMarker.setMap(null)
        destinationMarker = null
      }
    } catch (e) {
      console.warn('清理目标标记失败:', e)
    }
    
    try {
      if (pickupMarker) {
        pickupMarker.setMap && pickupMarker.setMap(null)
        pickupMarker = null
      }
    } catch (e) {
      console.warn('清理取餐标记失败:', e)
    }
    
    // 销毁地图实例
    try {
      if (map) {
        map.destroy && map.destroy()
        map = null
      }
    } catch (e) {
      console.warn('销毁地图实例失败:', e)
      map = null // 强制设为null
    }
    
    // 清理DOM容器
    try {
      const domElement = document.getElementById(mapId.value)
      if (domElement) {
        domElement.innerHTML = ''
      }
      if (mapContainer.value) {
        mapContainer.value.innerHTML = ''
      }
    } catch (e) {
      console.warn('清理DOM容器失败:', e)
    }
    
    // 重置状态
    distance.value = 0
    estimatedTime.value = 0
    
  } catch (error) {
    console.warn('地图清理过程中出现错误:', error)
  }
}

// Haversine距离计算公式（从骑手端移植）
const calculateHaversineDistance = (lat1: number, lng1: number, lat2: number, lng2: number) => {
  const R = 6371 // 地球半径（公里）
  const dLat = (lat2 - lat1) * Math.PI / 180
  const dLng = (lng2 - lng1) * Math.PI / 180
  const a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
            Math.cos(lat1 * Math.PI / 180) * 
            Math.cos(lat2 * Math.PI / 180) * 
            Math.sin(dLng/2) * Math.sin(dLng/2)
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
  return R * c
}

// 格式化距离显示（从骑手端移植）
const formatDistance = (dist: number) => {
  if (dist < 1) {
    return `${Math.round(dist * 1000)}m`
  } else {
    return `${dist.toFixed(1)}km`
  }
}

// 获取距离文本（从骑手端移植）
const getDistanceText = () => {
  if (distance.value === 0) return '计算中...'
  return `距离: ${formatDistance(distance.value)}`
}

// 获取时间文本（从骑手端移植）
const getTimeText = () => {
  if (estimatedTime.value === 0) return '计算中...'
  if (estimatedTime.value < 60) {
    return `预计送达: ${estimatedTime.value}分钟`
  }
  const hours = Math.floor(estimatedTime.value / 60)
  const minutes = estimatedTime.value % 60
  return `预计送达: ${hours}小时${minutes}分钟`
}

// 获取距离标签类型（从骑手端移植）
const getDistanceTagType = () => {
  if (distance.value === 0) return 'info'
  if (distance.value < 1) return 'success'
  if (distance.value < 3) return 'warning'
  return 'danger'
}

// 计算距离和时间（简化版本）
const calculateDistanceAndTime = () => {
  if (!props.riderLocation || !props.deliveryAddress) {
    distance.value = 0
    estimatedTime.value = 0
    return
  }

  // 计算骑手到配送地址的距离
  distance.value = calculateHaversineDistance(
    props.riderLocation.latitude,
    props.riderLocation.longitude,
    props.deliveryAddress.latitude,
    props.deliveryAddress.longitude
  )

  // 根据距离估算时间（每公里约2.5分钟）
  estimatedTime.value = Math.ceil(distance.value * 2.5)
  
  console.log(`距离计算完成: ${distance.value.toFixed(2)}km, ${estimatedTime.value}分钟`)
}

// 刷新位置
const refreshLocation = () => {
  calculateDistanceAndTime()
  ElMessage.success('位置信息已刷新')
}

// 联系骑手
const contactRider = () => {
  if (props.riderInfo?.phone) {
    window.location.href = `tel:${props.riderInfo.phone}`
  } else {
    ElMessage.warning('暂无骑手联系方式')
  }
}

// 组件卸载时清理资源
onUnmounted(() => {
  destroyMap()
})
</script>

<style scoped>
.delivery-map-dialog {
  :deep(.el-dialog) {
    margin-top: 5vh;
    max-height: 90vh;
    overflow: hidden;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
    box-sizing: border-box;
  }

  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    flex-shrink: 0;
  }

  .map-container {
    height: 70vh;
    min-height: 500px;
    max-height: calc(90vh - 160px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .map-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 16px;
    flex-shrink: 0;
    max-height: 150px;
    overflow: hidden;

    .order-info {
      flex: 1;

      h3 {
        margin: 0 0 12px 0;
        color: #333;
        font-size: 18px;
      }

      .location-item {
        margin: 8px 0;
        color: #666;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;

        .location-label {
          font-weight: 500;
          color: #333;
          min-width: 40px;
        }
      }

      .location-item:last-child {
        border-bottom: none;
      }

      .pickup-location {
        color: #52c41a;
      }

      .delivery-location {
        color: #f5222d;
      }

      .phone-info {
        margin: 4px 0;
        color: #666;
        display: flex;
        align-items: center;
        gap: 8px;
      }
    }

    .distance-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;

      .eta-tag {
        min-width: 80px;
        text-align: center;
      }

      .rider-info {
        margin-top: 4px;
        font-size: 12px;
        opacity: 0.8;
      }
    }
  }

  .map-area {
    flex: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    min-height: 300px;
    max-height: 100%;

    .map-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #666;

      .el-icon {
        font-size: 32px;
        margin-bottom: 8px;
      }
    }
  }

  .map-actions {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    justify-content: center;
    flex-wrap: wrap;

    .el-button {
      flex: 1;
      min-width: 100px;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}

/* 简单地图的样式 */
.simple-map {
  padding: 20px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .map-info {
    flex: 1;

    h3 {
      color: white;
      margin-bottom: 20px;
      font-size: 20px;
    }

    .location-items {
      max-width: 500px;
      margin: 0 auto;

      .location-item {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 15px;
        margin: 10px 0;
        display: flex;
        align-items: center;
        gap: 15px;
        text-align: left;

        .location-icon {
          font-size: 24px;
          width: 40px;
          text-align: center;
          
          &.pickup { color: #52c41a; }
          &.delivery { color: #f5222d; }
          &.rider { color: #339AFF; }
        }

        .location-details {
          flex: 1;
          
          .location-type {
            font-weight: bold;
            margin-bottom: 4px;
            font-size: 14px;
          }
          
          .location-address {
            font-size: 13px;
            opacity: 0.9;
            line-height: 1.4;
          }
        }
      }
    }
  }

  .map-note {
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
  }
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .delivery-map-dialog {
    :deep(.el-dialog) {
      margin: 0;
      max-height: 100vh;
      border-radius: 0;
    }

    :deep(.el-dialog__body) {
      max-height: calc(100vh - 120px);
      padding: 15px;
    }

    .map-container {
      height: calc(100vh - 180px);
      min-height: 400px;
    }

    .map-header {
      flex-direction: column;
      gap: 12px;
      max-height: none;

      .distance-info {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
      }
    }

    .map-actions {
      padding: 10px 0;
      
      .el-button {
        min-width: 80px;
        font-size: 14px;
      }
    }
  }

  .simple-map {
    padding: 15px;

    .map-info {
      h3 {
        font-size: 18px;
      }

      .location-items {
        .location-item {
          flex-direction: column;
          text-align: center;
          gap: 10px;

          .location-details {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
